<template>
	<view>
		<view class="cu-bar bg-white margin-line">
			<view class="action">
				图片上传 <text class="text_tip">图片上传限制2M</text>
			</view>
			<view class="action">
				{{imgList.length}}/{{max}}
			</view>
		</view>

		<view class="grid col-4 grid-square flex-sub">
			<view class="bg-img" v-for="(item,index) in imgList" :key="index" @click.stop="ViewImage" :data-url="imgList[index]">
				<image class="bg-image" :src="imgList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="index">
					<text class='cuIcon-close'></text>
				</view>
			</view>
			<view class="solids" @click.stop="ChooseImage" v-if="imgList.length<=max">
				<text class='cuIcon-cameraadd'></text>
			</view>
		</view>
		<view class="cu-toast flex justify-center">
			<view class="boxs-filter round padding-sm " v-if="toastModal">
				<view class="text-white">{{toast}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				toastModal: false,
				toast: '提示信息',
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var style = ""
				return style
			}
		},
		props: {
			datas: {},
			max: {
				type: Number,
				default: 4
			}
		},
		watch: {
			datas: function(value) {
				this.imgList = value
			}
		},
		methods: {
			showToast: function(text) {
				this.toastModal = true;
				this.toast = text;
				setTimeout(res => {
					this.toastModal = false;
				}, 2000)
			},
			onClick() {
				this.$emit('onclick', true);
			},
			onRight() {
				this.$emit('onright', true);
			},
			ChooseImage() {
				let that=this
				if (this.imgList.length < this.max) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							let images = res.tempFilePaths;
							that.compressedImage(images[0],10,(newImg)=>{
								let addImageArr=[newImg];
								if ((that.imgList.length + images.length) <= that.max) {
									if (that.imgList.length != 0) {
										that.imgList = that.imgList.concat(addImageArr)
									} else {
										that.imgList = addImageArr
									}
									that.$emit('onchange', that.imgList);
								} else {
									that.showToast("超过可选择图片数量")
								}
							})
						

						}
					});
				} else {
					that.showToast("超过可选择图片数量")
				}
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
				this.$emit('onchange', this.imgList);
			},
			// 图片压缩
			compressedImage(src, num = 5,callback) {
				let _this = this;
				uni.getImageInfo({
					src,
					success(res) {
						// console.log('压缩前', res)
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d')
						canvas.width = canvasWidth / num
						canvas.height = canvasHeight / num
						ctx.drawImage(img, 0, 0, canvasWidth / num, canvasHeight / num)
						canvas.toBlob(function(fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc)
							// console.log(imgSrc)
							callback&&callback(imgSrc)
							// console.log('压缩后', imgSrc)
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	/* .bg-img image {
		width: 100%;
		height: 100%;
	} */
	.bg-image {
		left: 0;
	}
	.text_tip {
		font-size: 20rpx;
		padding-left: 30rpx;
		color: rgba(0, 0, 0, .6);
	}
</style>
